<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
</head>

<body>
    <h1>{{ title }}</h1>
    
    <form method="POST" action="{% if action == 'add' %}{{ url_for('scheduled_events.add_scheduled_event') }}{% else %}{{ url_for('scheduled_events.edit_scheduled_event', event_id=event.id) }}{% endif %}">
        <div class="form-row">
            <div class="form-group">
                <label>间隔天数:</label>
                <input type="number" name="interval_days" min="1" required {% if action == 'edit' %}value="{{ event.interval_days }}"{% endif %}/>
            </div>
            
            <div class="form-group">
                <label>执行时间 (24小时制):</label>
                <input type="time" name="execution_time" class="form-control" required {% if action == 'edit' %}value="{{ event.execution_time.strftime('%H:%M') }}"{% endif %}/>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label>类型:</label>
                <select name="event_type" required class="form-control">
                    <option value="income" {% if action == 'edit' and event.event_type == 'income' %}selected{% endif %}>收入</option>
                    <option value="expense" {% if action == 'edit' and event.event_type == 'expense' %}selected{% endif %}>支出</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>金额:</label>
                <input type="number" step="0.01" name="amount" required class="form-control" {% if action == 'edit' %}value="{{ event.amount }}"{% endif %}/>
            </div>
        </div>
        
        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" name="skip_weekends" value="true" class="form-checkbox" {% if action == 'edit' and event.skip_weekends %}checked{% endif %}/>
                跳过周末（周六、周日不执行）
            </label>
        </div>
        
        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" name="enabled" value="true" class="form-checkbox" {% if action == 'edit' and event.enabled or action == 'add' %}checked{% endif %}/>
                启用事件（只有启用的事件才会执行）
            </label>
        </div>
        
        <div class="form-group">
            <label>描述:</label>
            <input type="text" name="description" class="form-control" {% if action == 'edit' %}value="{{ event.description if event.description else '' }}"{% endif %}/>
        </div>
        
        <button type="submit" class="btn">{% if action == 'add' %}添加定时事件{% else %}更新定时事件{% endif %}</button>
    </form>
    
    <div style="text-align: center; margin-top: 20px;">
        <a href="{{ url_for('scheduled_events.scheduled_events') }}" class="btn">返回定时事件列表</a>
    </div>

    <!-- 导航按钮 -->
    <div class="floating-btn">
        <button onclick="toggleMenu()" aria-label="菜单按钮">☰</button>
        <ul class="menu" id="navMenu">
            <li><a href="/expenses" class="btn">查看支出</a></li>
            <li><a href="/budget" class="btn">查看预算</a></li>
            <li><a href="/fixed_expenses" class="btn">管理固定支出</a></li>
            <li><a href="/scheduled_events" class="btn">定时事件</a></li>
            <li>
                <a href="/reset-db" onclick="return confirm('确定要重置数据库吗？这将删除所有数据并重新创建表')" class="btn"
                    style="background-color: #f44336">重置数据库</a>
            </li>
        </ul>
    </div>

    <script>
        // 菜单切换函数
        function toggleMenu() {
            let menu = document.getElementById("navMenu");
            if (!menu) return;

            let changeOpen = menu.style.display != "block";

            const items = menu.querySelectorAll("li");
            items.forEach((item, index) => {
                item.style.animationDelay = changeOpen ? `${index * 0.1}s` : "0s";
            });

            menu.style.display = changeOpen ? "block" : "none";
        }

        // 点击其他地方隐藏菜单
        window.onclick = function (event) {
            const menu = document.getElementById("navMenu");
            const button = event.target.closest("button[aria-label='菜单按钮']");
            if (menu && menu.style.display === "block" && !button) {
                menu.style.display = "none";
            }
        };
    </script>
</body>

</html>